<script>
import {TopTips} from "@/API/http";

export default {
  name: "TopTips",
  data(){
    return{
      topTipsList:[],
      topTips: {
        pageNum: 1,
        pageSize: 5
      },
    }
  },
  methods:{

  },
  created(){
    // 这是头条请求
    TopTips(this.topTips).then(res =>{
      // console.log(res)
      this.topTipsList=res.rows.slice(0,5);
      // this.topTipsList
      // console.log(this.topTipsList)
    })
  }
}
</script>

<template>
<div>
  <div class="CoursesBox">
    <!--    课程上面-->
    <div class="CoursesTop">
      <slot name="top">
      </slot>
      <div style="margin-left: auto;">更多<a-icon class="rightArrow" type="right" /></div>
    </div>
    <!--    课程下面-->
    <div class="CoursesBottom">
      <div class="coursesBottomBox">
        <div class="coursesBottomitem" v-for="item in topTipsList" :key="item.articleId">
          <div class="CoursesImg">
            <img :src="item.coverImgUrl" alt="">
          </div>
          <p class="textTOP">{{item.title}}</p>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped lang="less">
p{
  margin: 0;
  padding: 0;
}
.CoursesBox{
  margin-top: 15px;
  padding: 15px ;
  border-radius: 15px;
  cursor: pointer;
  background: white;
}
//放图片的盒子
.coursesBottomBox{
  display: flex;
}
//课程上面
:deep(.CoursesTop){
  align-items: flex-end;
  display: flex;
  margin-bottom: 10px;
}
//课程下面
.CoursesBottom{
  border-top: 2px solid gainsboro;
}
//放文字图片的盒子
.coursesBottomitem{
  padding: 10px;
  margin: 10px;
  border-radius: 15px;
  box-shadow: 0 0 5px gainsboro;
}
.CoursesImg{
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  img{
    height: 117px;
    width: 194px;
    transition: transform 2s;
  }
  img:hover{
    transform: scale(1.2);
  }
}
//箭头
.rightArrow{
  margin-left: 5px;
  border: 1px solid black;
  border-radius: 50%;
  width: 15px;
  height: 15px;
}
:deep(.coursesText){
  display: flex;
}
//图底下的文字
.textTOP{
  width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>